<template>
  <div class="edit-dialog">
    <edu-dialog :title="sendData.title" width="50%" :visible.sync="show" :autoHeight="true"
      :confirmBtnText="$t('common.btn.confirm')" :close-on-click-modal="false" @close="close"
      @confirm="confirm('studentForm')">
      <el-form :model="baseData" ref="studentForm" :rules="rules" label-width="100px" label-position="right"
        size="small">
        <el-row>
          <el-col :span="10">
            <el-form-item :label="$t('graduationList.studentID')">
              <el-input v-model="baseData.studentId" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="2">
            <el-form-item :label="$t('graduationList.name')">
              <el-input v-model="baseData.name" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item :label="$t('graduationList.nation')">
              <el-input v-model="baseData.nationI18n" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="2">
            <el-form-item :label="$t('label.college')">
              <el-input v-model="baseData.facultyI18n" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item :label="$t('graduationList.IDNumber')">
              <el-input v-model="baseData.number" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="2">
            <el-form-item :label="$t('graduationList.grade')">
              <el-input v-model="baseData.grade" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item :label="$t('graduationList.sex')">
              <el-input v-model="baseData.sexI18n" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="2">
            <el-form-item :label="$t('graduationList.birthday')">
              <el-input v-model="baseData.birthdayStr" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item :label="$t('graduationList.trainingProfessional')">
              <el-input v-model="baseData.professionI18n" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="2">
            <el-form-item :label="$t('graduationList.schoolSystem')">
              <el-input v-model="baseData.lengthSchooling" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item :label="$t('graduationList.traininglevel')">
              <el-input v-model="baseData.trainingLevelI18n" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="2">
            <el-form-item :label="$t('graduationList.enrollmentDate')">
              <el-input v-model="baseData.enrolDate" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item :label="$t('graduationList.graduationSeason')">
              <el-input v-model="baseData.graduationSeasonI18n" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="2">
            <el-form-item :label="$t('graduationList.principal')">
              <el-input v-model="baseData.principalName" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item :label="$t('graduationList.failingCourse')">
              <el-tooltip effect="dark" :content="baseData.noPassCourse" placement="top-start" :disabled="!baseData.noPassCourse || baseData.noPassCourse.length <10">
                <el-input v-model="baseData.noPassCourse" disabled />
              </el-tooltip>
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="2">
            <el-form-item :label="$t('graduationList.graduationYear')">
              <el-input v-model="baseData.graduationDate" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item :label="$t('graduationList.certificateNo')">
              <el-input v-model="baseData.certificateNo" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="2">
            <el-form-item :label="$t('graduationList.degreeCertificateNumber')">
              <el-input v-model="baseData.diplomaNo" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item :label="$t('graduationList.candidateNumber')">
              <el-input v-model="baseData.examineeNo" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="2">
            <el-form-item :label="$t('graduationList.AdmissionTicketNumber')">
              <el-input v-model="baseData.preTestCode" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item :label="$t('graduationList.formerName')">
              <el-input v-model="baseData.usedName" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="2">
            <el-form-item :label="$t('graduationList.remark')">
              <el-tooltip effect="dark" :content="baseData.manualRemark" placement="top-start" :disabled="!baseData.manualRemark || baseData.manualRemark.length <10">
                <el-input v-model="baseData.manualRemark" disabled />
              </el-tooltip>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item :label="$t('graduationList.collegeAuditConclusion')">
              <el-input v-model="baseData.collegeAuditConclusionI18n" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="2">
            <el-form-item :label="$t('graduationList.bachelorScience')">
              <el-input v-model="baseData.degreeI18n" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item :label="$t('graduationList.graduationTime')" prop="graduateTime">
              <el-date-picker
                v-model="baseData.graduateTime"
                type="date"
                style="width:100%"
                format="yyyy-MM-dd" 
                value-format="yyyy-MM-dd HH:mm:ss"
                :placeholder="$t('graduationList.pleaseSelect')">
            </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="2">
            <el-form-item :label="$t('graduationList.auditBatch')">
              <el-input :value="baseData.reviewBatchI18n || $t('graduationList.noPending')" disabled />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </edu-dialog>
  </div>
</template>
<script>
  export default {
    props: {
      show: {
        type: Boolean,
        default: false
      },
      sendData: {
        type: Object,
        default: {}
      }
    },
    data() {
      return {
        rules: {}
      }
    },
    computed: {
      baseData() {
        return this.sendData.data || [];
      }
    },
    methods: {
      reset() {
        this.$refs.studentForm.resetFields();
      },
      confirm() {
        this.$refs.studentForm.validate((valid) => {
          if (valid) {
            if (this.sendData.editApi) {
              this.sendData.editApi({
                studentId: this.baseData.studentId,
                graduateTime: this.baseData.graduateTime
              }).then(res =>{
                if (res && res.code === 200) {
                  this.sendData.updateList();
                  this.$message({
                    message: '编辑学生信息成功',
                    type: 'success'
                  });
                  this.close();
                }
              })
            }
          }else {
            return false;
          }
        });
      },
      close() {
        this.$refs.studentForm.resetFields();
        this.$emit('update:show', false);
      }
    }
  }

</script>
<style lang="scss" scoped>
  .edit-dialog ::v-deep .el-tooltip.el-input input{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
